<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="110px">
        <el-form-item label="订单编号" prop="orderNo">
          <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="下单时间" prop="createTime">
          <el-date-picker @change="createTimeChange" v-model="createTime" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
        </el-form-item>
        <el-form-item label="订单金额" prop="amount">
          <el-input v-model="queryParams.amountMin" placeholder="最小金额" clearable size="small"
            @keyup.enter.native="handleQuery" class="maxNum"/>
            <span class="line">—</span>
            <el-input v-model="queryParams.amountMax" placeholder="最大金额" clearable size="small"
            @keyup.enter.native="handleQuery" class="maxNum"/>
        </el-form-item>
        <el-form-item label="用户名" prop="fuwuPerson">
          <el-input v-model="queryParams.fuwuPerson" placeholder="请输入用户名" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="用户电话" prop="fuwuPhone">
          <el-input v-model="queryParams.fuwuPhone" placeholder="请输入用户电话" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="下单项目" prop="projectId">
          <el-select v-model="queryParams.projectId" placeholder="请选择下单项目">
            <el-option multiple v-for="contract in projectArray" :key="contract.id" :label="contract.projectName"
              :value="contract.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务技师" prop="nickName">
          <el-input v-model="queryParams.nickName" placeholder="请输入服务技师" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="技师电话" prop="phonenumber">
          <el-input v-model="queryParams.phonenumber" placeholder="请输入技师电话" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="出行方式" prop="chuxingType">
          <el-select clearable v-model="queryParams.chuxingType" placeholder="请选择出行方式">
            <el-option v-for="contract in chuxingTypeArray" :key="contract.dictValue" :label="contract.dictLabel"
              :value="contract.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优惠券" prop="couponsFlag">
          <el-select clearable v-model="queryParams.couponsFlag" placeholder="请选择优惠券">
            <el-option v-for="contract in couponsFlagArray" :key="contract.dictValue" :label="contract.dictLabel"
              :value="contract.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款方式" prop="payChannel">
          <el-select multiple v-model="queryParams.payChannel" placeholder="请选择付款方式">
            <el-option v-for="contract in payChannelArray" :key="contract.dictValue" :label="contract.dictLabel"
              :value="contract.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div>已收：¥ {{ allMoney }}元</div>
      <el-table v-loading="loading" :data="tabList" row-key="orderNo" lazy default-expand-all
    :tree-props="{children: 'appends'}">
        <el-table-column label="订单编号" align="center" prop="orderNo"  width="180"/>
        <el-table-column label="付款日期" align="center" prop="paymentTime" />
        <el-table-column label="用户名" align="center" prop="fuwuPerson" />
        <el-table-column label="用户电话" align="center" prop="fuwuPhone" />
        <el-table-column label="下单项目" align="center" prop="projectNames" />
        <el-table-column label="服务地址" align="center" prop="fuwuAddr" />
        <el-table-column label="订单金额(元)" align="center" prop="totalAmount" />
        <el-table-column label="服务技师" align="center" prop="nickName" />
        <el-table-column label="技师电话" align="center" prop="phonenumber" />
        <el-table-column label="出行方式" align="center" prop="chuxingType" :formatter="chuxingTypeformatter"/>
        <el-table-column label="优惠券" align="center" prop="zhekouAmount" :formatter="couponsFlagformatter"/>
        <el-table-column label="付款方式" align="center" prop="payChannel" :formatter="payChannelformatter"/>
        <el-table-column label="银联单号" align="center" prop="orderSn" />
        <el-table-column label="支付金额" align="center" prop="payAmount">
          <template slot-scope="scope">
              <div>{{scope.row.balanceReduce > 0 ? scope.row.thirdPay : scope.row.payAmount}}</div>
              <div v-if = "scope.row.balanceReduce > 0">余额抵扣：{{scope.row.balanceReduce}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" prop="">
          <template slot-scope="scope"> 
            <div v-if="scope.row.createType=='1'" v-hasPermi="['admin:orderPay:refund']" @click=orderPayClick(scope.row) style="color:cornflowerblue;cursor: pointer;">去退款</div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
  </template>
    
  <script>
  import {orderPayList,projectList ,orderPaySuccess} from "@/api/collectionBill/collectionBill";
  import { getToken } from '@/utils/auth'
  export default {
    name: "Knowledge",
    components: {
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 表格数据
        tabList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        companyTypeOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderNo:null,
          createTime:null,
          amountMin:null,
          amountMax:null,
          fuwuPerson:null,
          fuwuPhone:null,
          projectId:null,
          nickName:null,
          phonenumber:null,
          chuxingType:null,
          couponsFlag:null,
          payChannel:null,
        },
        createTime: '',
        createTimeStart: '',
        createTimeEnd: '',
        projectArray:[],//下单项目
        chuxingTypeArray:[],//出行方式
        couponsFlagArray:[],//优惠券
        payChannelArray:[],//付款方式
        allMoney:'0'
      };
    },
    created() {
      this.getList();
      this.pjList()
      //在字典查询-出行方式
      this.getDicts("chuxing_type").then(response => {
        this.chuxingTypeArray = response.data;
      });
      //优惠券
      this.getDicts("is_coupons_flag").then(response => {
        this.couponsFlagArray = response.data;
      });
      //付款方式
      this.getDicts("pay_channel").then(response => {
        this.payChannelArray = response.data;
      });
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.queryParams.createTimeStart = this.createTimeStart;
        this.queryParams.createTimeEnd = this.createTimeEnd;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.createTime = ''
        this.createTimeStart = ''
        this.createTimeEnd = ''
        this.queryParams.amountMax = '';
        this.queryParams.amountMin = '';
        this.handleQuery();
      },
      /** 查询产品入库列表 */
      getList() {
        this.loading = true;
        orderPayList(this.queryParams).then(response => {
          this.tabList = response.rows;
          this.total = response.total;
          this.allMoney = response.data
          this.loading = false;
        });
      },
      orderPayClick(row){
        console.log(row.orderNo)
        this.$confirm('确认退款', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return orderPaySuccess(
            row.orderNo
          );
        }).then(() => {
          this.$message({message: '退款成功',type: 'success'});
          this.getList();

        })
      },
      pjList() {
        projectList().then(response => {
          this.projectArray = response.data;
        });
      },
      //下单时间
      createTimeChange() {
        this.createTimeStart = this.createTime[0] 
        this.createTimeEnd = this.createTime[1]
      },
      //出行方式
      chuxingTypeformatter(row, column) {
        return this.selectDictLabel(this.chuxingTypeArray, row.chuxingType) + " ￥" + row.chuxingFei;
      },
      //优惠券
      couponsFlagformatter(row, column) {
        return row.zhekouAmount ? "￥" + row.zhekouAmount : "无";
      },
      //付款方式
      payChannelformatter(row, column) {
        return this.selectDictLabel(this.payChannelArray, row.payChannel);
      },
      //查看备注
      lookNotes(){
        this.open = true
      },
    }
  };
  </script>
  <style>
  .el-input--small{
    width: 192px;
  }
  .maxNum{
    width: 100px;
  }
  .line{
    margin: 0 10px;
  }
  </style>
    